<template>
    <el-select v-model="state" filterable multiple placeholder="请选择" :filter-method="query">
      <el-option v-for="item in optionsList" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
</template>

<script setup lang="ts">
const props = defineProps({
    value: {
        type: String,
        default: ''
    },
    options: {
        type: Array,
        default: [
            { value: '1', label: 'Tom' },
            { value: '2', label: 'Tom124' },
            { value: '3', label: 'Lihua' },
        ]
    } as any
})

const state = toRef(props.value)
const optionsList = ref([...props.options])

// 筛选符合条件
const query = (value: any) => {
    optionsList.value = props.options.filter((option: any) => {
        const Boo = (option?.label ?? '')?.toLowerCase().includes(value?.trim().toLowerCase())
        if (Boo) return option
    })
}
</script>

<style scoped></style>